<template>
  <div class="wrapper">
    <div class="header">
      <div class="left">
        <router-link to="/index">
          <logo></logo>
        </router-link>
        <div class="nav">
          
        </div>
      </div>
      <div class="right">
        <div class="user" v-if="isLogin">
          <router-link to="/message"><p class="iconfont icon-letter"></p></router-link>
          <Dropdown>
            <router-link to="/person"><img :src="userInfo.avatar" alt=""></router-link>
            <DropdownMenu slot="list">
              <router-link to="/person"><DropdownItem>个人中心</DropdownItem></router-link>
              <DropdownItem><p @click="loginout">退出</p></DropdownItem>
          </DropdownMenu>
          </Dropdown>
        </div>
        <router-link to="/login" v-else>
          <Button type="primary" class="btn"
            >登录</Button
          >
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
import logo from '@/components/logo.vue'
import { getSession, setLocal, getLocal } from "../utils/index.js";
import {mapActions, mapMutations, mapState} from 'vuex'

export default {
  components: {
    logo,
  },
  data () {
    return {
      userInfo:{}
    }
  },
  created(){
    let userInfo = getSession("userInfo");
    if(userInfo) {
      this.$store.commit('changeLoginStatus',true)
      this.userInfo = userInfo
    }
  },
  computed:{
    ...mapState(['isLogin'])
  },
  methods:{
    ...mapMutations(['changeLoginStatus']),
    loginout(){      
      window.sessionStorage.clear();
      this.$store.commit('changeLoginStatus',false)
    }
  }
}
</script>

<style lang='less' scoped>
.wrapper {
  height: 70px;
  background-color: #fff;
  box-shadow: 0px 1px 1px 0px #eee;
  // border-bottom: 2px solid #eee;
}
.header {
  height: 70px;
  width: 80%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
  max-width: 1240px;
}
.left {
  display: flex;
  align-items: center;
  .nav {
    display: flex;
    position: relative;
    left: 30px;
    div {
      font-size: 17px;
      margin: 0 23px;
    }
  }
}
.right{
  .user{
    display: flex;
    align-items: center;
    .iconfont {
      font-size: 25px;
      margin-right: 22px;
      color:#9f9f9f;
    }
    img{
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }
  }
}
</style>
